<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>编辑主题</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="./edittheme.css">
        <script>
            var baseTemplate =
        "\n\
body {\n\
    background-color: {body_bg};\n\
}\n\
ppage {\n\
    width: {page_width}px;\n\
    min-height: {page_height}px;\n\
    box-sizing: border-box;\n\
    background-color: {page_bg};\n\
    color:{page_text};\n\
    box-shadow: 10px 10px 10px {page_shadow};\n\
    border-radius: 10px;\n\
}\n\
ppage-c{\n\
    width: {page_width}px;\n\
    height: {page_height}px;\n\
    box-sizing: border-box;\n\
    background-color: {page_bg};\n\
    color:{page_text};\n\
    box-shadow: 10px 10px 10px {page_shadow};\n\
    border-radius: 10px;\n\
    text-align:center;\n\
}\n\
opage {\n\
    width: {page_width}px;\n\
    height: {page_height}px;\n\
    text-align: center;\n\
    color: {page_text};\n\
}\n\
a {\n\
    text-decoration: none;\n\
    border-radius: 10px;\n\
    background-color: {page_text};\n\
    box-shadow: 3px 3px 3px {page_text};\n\
    padding: 5px;\n\
    color: {page_bg};\n\
}\n\
.button-left,\n\
.button-right {\n\
    color: {other_button_char};\n\
    background-color: {other_button_bg};\n\
    transition: .4s;\n\
}\n\
.button-left:hover,\n\
.button-right:hover {\n\
    opacity: 0.8;\n\
    transform: scale(1.2);\n\
}\n\
.loading>div>div{\n\
    background-color: {loading_bg};\n\
}\n\
";

            function format(str, data) {
                for (var key in data) {
                    str = str.replace(new RegExp('{' + key + '}', 'g'), data[key]);
                }
                return str;
            }
            var $_ = (str) => {
                return document.querySelector(str);
            }
            addEventListener('load', () => {
                $_('div.button').addEventListener('click', () => {
                    var css = format(baseTemplate, {
                        'body_bg': $_('#body_bg').value,
                        'page_width': $_('#page_width').value,
                        'page_height': $_('#page_height').value,
                        'page_bg': $_('#page_bg').value,
                        'page_text': $_('#page_text').value,
                        'page_shadow': $_('#page_shadow').value,
                        'other_button_char': $_('#other_button_char').value,
                        'other_button_bg': $_('#other_button_bg').value,
                        'loading_bg': $_('#loading_bg').value
                    });
                    
                    var nw=window.open('./show_css.html');
                    window.addEventListener('message',(msg)=>{
                        if(msg.data=='load'){
                            nw.postMessage(css,'*');
                        }
                    })
                    
                });
            });
        </script>
    </head>

    <body>
        <form align="center">
            <h1>编辑主题</h1>
            <h3>Loading</h3>
            进度条颜色:<input type="color" id="loading_bg"><br>
            <hr>
            <h3>Page</h3>
            背景颜色:<input type="color" id="page_bg"><br>
            文字颜色:<input type="color" id="page_text"><br>
            页面宽度:<input type="number" id="page_width" value="800" disabled>px<br>
            页面高度:<input type="number" id="page_height" value="600" disabled>px<br>
            页面投影颜色:<input type="color" id="page_shadow"><br>
            <hr>
            <h3>Other</h3>
            场景背景颜色:<input type="color" id="body_bg"><br>
            按钮图形颜色:<input type="color" id="other_button_char"><br>
            按钮背景颜色:<input type="color" id="other_button_bg"><br>
            <div class="button">生成css</div>
        </form>
    </body>

</html>